<template>
	<view>
		<!-- homeSub/pages/area/area.wxml -->
		<view class="atop">
			<view class="iview">
				<icon class="inputico" type="search" size="16"></icon>
				<input class="inputarea" @input="searchcity" placeholder="请输入城市名称" confirm-type="search" />
			</view>
			<view class="canel" @tap="canel">取消</view>
		</view>

		<view class="hiscity">当前城市</view>
		<view class="hislist1">
			<view class="btn" @click="clklocal" v-if="ccity">{{ ccity }}</view>
			<view class="btn" @click="getLocaltion" v-else>定位失败，请点击重试</view>
		</view>

		<scroll-view :scroll-y="true" class="arealist" :scroll-into-view="moveword" :scroll-with-animation="true">
			<view class="hiscity" v-if="history.length > 0">历史城市</view>
			<view class="all">
				<view class="cityname" :data-index="index" @tap="clk_his" v-for="(item, index) in history" :key="index"
					:data-id="item.id">
					{{ item.name }}
				</view>
			</view>
			<!-- <view class='hislist' style='height:{{hisheight}}rpx'>
    <button  wx:for="{{history}}" wx:key="id" class="{{(index+1)%3==0?'last':''}}" bindtap='clk_his'
      data-index='{{index}}'>{{item.name}}</button>
  </view> -->
			<template v-if="sellerNo == 'lp'">
				<view class="hiscity" v-if="popularCityList.length > 0">热门城市</view>
				<view class="hislist">
					<button :class="(index + 1) % 3 == 0 ? 'last' : ''" @tap="clk_his1" :data-index="index"
						v-for="(item, index) in popularCityList" :key="item.id">
						{{ item.name }}
					</button>
				</view>
			</template>


			<view class="citylist" :id="item.word" v-for="(item, index) in wordSite" :key="item.id">
				<view class="cityword" v-if="item.siteList.length > 0">{{ item.word }}</view>

				<view class="all">
					<view class="cityname" :data-data="siteList" @tap="clkcity"
						v-for="(siteList, index1) in item.siteList" :key="index1" :data-id="siteList.id">
						{{ siteList.cityName }}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 滚动条上方字母 -->
		<view class="cityword tipword">{{ selword }}</view>
		<!-- 滚动条上方字母 -->

		<!-- 点击字母弹框 -->
		<view class="popword" v-if="showpop">{{ popword }}</view>
		<!-- 点击字母弹框 -->

		<!-- 右侧字母 -->
		<view class="wordlist">
			<view>#</view>
			<view v-if="item.siteList.length > 0" :data-w="item.word" @tap="clkword" v-for="(item, index) in wordSite"
				:key="item.id">
				{{ item.word }}
			</view>
			<view>#</view>
		</view>
		<!-- 右侧字母 -->

		<view class="citypop" v-if="searchtxt != ''">
			<view class="cityname" :data-index="index" @tap="clk_lx" v-for="(list, index) in seachlist"
				:key="list.listid">
				{{ list.name }}
			</view>
		</view>
	</view>
</template>

<script>
	'use strict';

	// exports.__esModule = true; // homeSub/pages/area/area.ts
	//选择区域
	// pages/area/area.js

	var app = getApp();
	var time = null; // 定时器

	var https_1 = require('./../../../api/https.js');
	export default {
		data() {
			return {
				sellerNo: app.globalData.sellerNo,
				popularCityList: [],
				searchtxt: '',
				ccity: uni.getStorageSync('currentCityName'), //当前城市
				clocal: null,
				moveword: '',
				showpop: false,
				popword: 'A',
				wordarr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],

				wordSite: [{
						word: 'A',
						siteList: []
					},
					{
						word: 'B',
						siteList: []
					},
					{
						word: 'C',
						siteList: []
					},
					{
						word: 'D',
						siteList: []
					},
					{
						word: 'E',
						siteList: []
					},
					{
						word: 'F',
						siteList: []
					},
					{
						word: 'G',
						siteList: []
					},
					{
						word: 'H',
						siteList: []
					},
					{
						word: 'I',
						siteList: []
					},
					{
						word: 'J',
						siteList: []
					},
					{
						word: 'K',
						siteList: []
					},
					{
						word: 'L',
						siteList: []
					},
					{
						word: 'M',
						siteList: []
					},
					{
						word: 'N',
						siteList: []
					},
					{
						word: 'O',
						siteList: []
					},
					{
						word: 'P',
						siteList: []
					},
					{
						word: 'Q',
						siteList: []
					},
					{
						word: 'R',
						siteList: []
					},
					{
						word: 'S',
						siteList: []
					},
					{
						word: 'T',
						siteList: []
					},
					{
						word: 'U',
						siteList: []
					},
					{
						word: 'V',
						siteList: []
					},
					{
						word: 'W',
						siteList: []
					},
					{
						word: 'X',
						siteList: []
					},
					{
						word: 'Y',
						siteList: []
					},
					{
						word: 'Z',
						siteList: []
					}
				],

				list: [],
				seachlist: [],
				history: [],
				hisheight: 30,
				siteList: [],
				selword: ''
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function() {
			// 获取历史搜索
			this.LoadData();
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			//获取城市列表
			this.citys();
			// 没有登录的情况不请求数据
			// if(uni.getStorageSync('token')){
			this.getPopularCity();
			// }

			if (uni.getStorageSync('cityName')) {
				this.ccity = uni.getStorageSync('cityName')
			} else {
				this.ccity = uni.getStorageSync('currentCityName') || app.globalData.defaultCity.cityName
			}

		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			// 页面销毁时执行
			clearInterval(time);
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			//获取热门城市
			getPopularCity: function() {
				var that = this;
				https_1.getPopularCityNew().then(function(res) {
					console.log(res, '热门城市...')
					if (res.code == 0) {
						that.popularCityList = res.data
					}
				});
			},

			//获取城市经纬度
			getAreaByIdFn: function(cId) {
				var that = this;
				https_1.getAreaById({
						id: cId
					})
					.then(function(res) {
						console.log(res, '城市信息00000000000..')
						if (res.code == 0) {
							uni.setStorageSync('cityName', res.data.name);

							// 首页切换城市按钮选项 点击城市名字后,当前定位使用用户首次授权的经纬度;(20231107李总要求)
							// uni.setStorageSync('longitude', Number(res.data.longitude) ? Number(res.data.longitude) : uni.getStorageSync("longitude"));
							// uni.setStorageSync('latitude', Number(res.data.latitude) ? Number(res.data.latitude) : uni.getStorageSync("latitude"));

							uni.$emit('upDataMap')
						}
					});
			},

			//取消
			canel: function() {
				uni.navigateBack();
			},

			/***
			 * 请求数据
			 */
			LoadData: function() {
				var that = this;
				var histr = uni.getStorageSync('history');

				if (histr != '' && histr != undefined && histr != null) {
					that.history = histr
				}

				if (histr.length == 0) {
					that.hisheight = 30
				} else if (histr.length > 0 && histr.length <= 3) {
					that.hisheight = 120
				} else {
					that.hisheight = 210
				}
			},

			citys: function() {
				var that = this;
				https_1
					.city({
						sellerId: app.globalData.sellerId
					})
					.then(function(res) {
						if (res.code == 0) {
							var list = res.data;
							that.list = res.data
							list.forEach(function(element) {
								that.wordSite.forEach(function(item) {
									if (element.cityPinyin === item.word) {
										item.siteList.push(element);
									}
								});
							});
							that.wordSite = that.wordSite
						}
					});

				console.log(that.wordSite, '城市列表...')
			},

			/**
			 * 查找城市输入框事件
			 */
			searchcity: function(e) {
				var stxt = e.detail.value;
				var allist = this.list;
				var seachlist = [];

				for (var i = 0; i < allist.length; i++) {
					if (allist[i]['cityName'].indexOf(stxt) != -1) {
						var cityId = allist[i]['cityId'];
						var cityname = allist[i]['cityName'];
						var location = {
							cityLlatitude: allist[i]['cityLlatitude'],
							cityLongitude: allist[i]['cityLongitude']
						}
						seachlist.push({
							cityId: cityId,
							name: cityname,
							location: location
						});
					}

					if (seachlist.length > 9) {
						break;
					}
				}

				this.searchtxt = stxt,
					this.seachlist = seachlist
			},

			/**
			 * 点击 城市
			 */
			clkcity: function(e) {
				console.log("点击 城市del-", e.currentTarget.dataset.id)
				if (e.currentTarget.dataset.id) {
					this.getAreaByIdFn(e.currentTarget.dataset.id)
				}


				var data = e.currentTarget.dataset.data;
				app.globalData.mapismove = true;
				app.globalData.cityname = data.cityName;
				app.globalData.movecal = {
					lat: data.cityLlatitude,
					lng: data.cityLongitude
				}; // //添加到历史

				var hjsom = {
					name: data.cityName,
					location: app.globalData.movecal,
					id: data.id
				}; // //防止重复

				var history = this.history;

				for (var i = 0; i < history.length; i++) {
					if (history[i]['name'] == data.cityName) {
						history.splice(i, 1);
					}
				} // //防止大于8个

				if (history.length > 7) {
					history.pop();
				}

				history.splice(0, 0, hjsom);
				uni.setStorageSync('history', history);
				uni.setStorageSync('cityName', data.cityName);
				uni.setStorageSync('cityId', data.id);
				if (!uni.getStorageSync('currentCityName')) {
					uni.setStorageSync('latitude', data.cityLlatitude);
					uni.setStorageSync('longitude', data.cityLongitude);
				}

				uni.navigateBack();
			},

			/**
			 * 点击字母
			 */
			clkword: function(e) {
				var word = e.currentTarget.dataset.w;
				var that = this;
				this.moveword = word,
					this.popword = word,
					this.showpop = true
				setTimeout(function() {
					that.showpop = false
				}, 500);
			},

			/**
			 * 点击历史记录
			 */
			clk_his: function(e) {
				console.log("点击历史记录del--", e.currentTarget.dataset.id)
				if (e.currentTarget.dataset.id) {
					this.getAreaByIdFn(e.currentTarget.dataset.id)
				}

				var index = e.currentTarget.dataset.index;
				var history = this.history;
				var arritem = history[index];
				var location = arritem['location'];
				uni.setStorageSync('cityName', this.history[index].name);
				uni.setStorageSync('cityId', this.history[index].id);
				if (!uni.getStorageSync('currentCityName')) {
					uni.setStorageSync('latitude', this.history[index].location.lat);
					uni.setStorageSync('longitude', this.history[index].location.lng);
				}
				app.globalData.mapismove = true;
				app.globalData.movecal = location;
				app.globalData.cityname = this.history[index].name;
				history.splice(index, 1);
				history.splice(0, 0, arritem);
				uni.setStorageSync('history', history);
				uni.navigateBack();
			},

			/**
			 * 点击热门城市
			 */
			clk_his1: function(e) {
				console.log("点击热门城市del---", e.currentTarget.dataset.id)
				if (e.currentTarget.dataset.id) {
					this.getAreaByIdFn(e.currentTarget.dataset.id)
				}

				var index = e.currentTarget.dataset.index;
				var list = this.popularCityList;
				var arritem = list[index];
				var location = arritem['location'];
				app.globalData.mapismove = true;
				app.globalData.movecal = location;
				app.globalData.cityname = this.popularCityList[index].name;
				uni.setStorageSync('cityName', this.popularCityList[index].name);
				uni.setStorageSync('cityId', this.popularCityList[index].id);
				if (!uni.getStorageSync('currentCityName')) {
					uni.setStorageSync('latitude', this.popularCityList[index].latitude);
					uni.setStorageSync('longitude', this.popularCityList[index].longitude);
				}
				uni.navigateBack();
			},

			/**
			 * 点击联想搜索
			 */
			clk_lx: function(e) {
				var index = e.currentTarget.dataset.index;
				var arritem = this.seachlist[index];
				var location = arritem['location'];
				var history = this.history;
				app.globalData.mapismove = true;
				app.globalData.movecal = location; //添加到历史
				uni.setStorageSync('cityName', arritem['name']);
				uni.setStorageSync('cityId', arritem.cityId);
				if (!uni.getStorageSync('currentCityName')) {
					uni.setStorageSync('latitude', arritem.location.cityLlatitude);
					uni.setStorageSync('longitude', arritem.location.cityLongitude);
				}
				var cityname = arritem['name'];
				app.globalData.cityname = cityname;
				var hjsom = {
					name: cityname,
					location: location,
					id: arritem['cityId']
				}; //防止重复

				for (var i = 0; i < history.length; i++) {
					if (history[i]['name'] == cityname) {
						history.splice(i, 1);
					}
				} //防止大于8个

				if (history.length > 7) {
					history.pop();
				}

				history.splice(0, 0, hjsom);
				uni.setStorageSync('history', history);
				uni.navigateBack();
			},

			/**
			 * 点击当前位置
			 */
			clklocal: function() {
				var cityName = uni.getStorageSync('currentCityName');
				var cityId = uni.getStorageSync('currentCityId');
				uni.setStorageSync('cityName', cityName);
				uni.setStorageSync('cityId', cityId);
				uni.navigateBack();
			},
			// 重新获取定位
			async getLocaltion() {
				let that = this;

				//#ifdef APP-PLUS
				let result = await this.$store.dispatch("requestPermissions", 'ACCESS_FINE_LOCATION')
				if (result !== 1) {
					return
				} else {
					app.globalData.getCity(() => {
						that.ccity = uni.getStorageSync('cityName') ? uni.getStorageSync('cityName') : uni
							.getStorageSync('currentCityName')
					}, true);
				}
				//#endif
				//#ifdef MP-WEIXIN
				//获取uni设置
				uni.getSetting({
					success: function(res) {
						console.log(res, res.authSetting['scope.userLocation'])
						if (!res.authSetting['scope.userLocation']) {
							console.log('area未授权定位权限....', res.authSetting['scope.userLocation'])
							uni.showModal({
								title: '位置授权说明',
								content: '需要获取您的地理位置，以精确获取周边充电站信息，否则无法准确查询附近充电桩资源。',
								confirmText: '确认',
								confirmColor: uni.getStorageSync('textColor') || '#6DB12E',
								cancelText: '取消',
								success: function(res) {
									console.log(res, '')
									if (res.confirm) {
										console.log('确认后去小程序设置授权')
										uni.openSetting({
											success(res) {
												console.log(res.authSetting)
											}
										});

									} else if (res.cancel) {
										console.log('取消后不做操作')
									}
								}
							});
						} else {
							console.log('信号弱,area其实已经打开了定位权限....', res.authSetting['scope.userLocation'])

							app.globalData.getCity(() => {
								that.ccity = uni.getStorageSync('cityName') ? uni.getStorageSync(
									'cityName') : uni.getStorageSync('currentCityName')
							}, true);
						}
					}
				});
				//#endif
			},
			//选择全国
			clk_all: function() {
				app.globalData.mapismove = true;
				app.globalData.cityname = 0;
				uni.navigateBack();
			}
		}
	};
</script>
<style lang="less" scoped>
	/* homeSub/pages/area/area.wxss */
	@import "../../../commin/commin.less";

	.atop {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 40rpx 28rpx;
		background: #FFFFFF;
		;
		border-bottom: 1rpx solid #DCDFE6;

		.canel {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: var(--textColor);
			margin-left: 23rpx;
			white-space: nowrap;
		}
	}

	.iview {
		width: 88%;
		background: #F5F7FA;
		border-radius: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.inputico {
		width: 40rpx;
		height: 40rpx;
		margin-top: 10rpx;
		margin-left: 23rpx;
		margin-right: 15rpx;
	}

	.inputarea {
		height: 6vh;
		line-height: 6vh;
		color: #666;
		letter-spacing: 1px;
		display: flex;
		padding-right: 15rpx;
		background: #F5F7FA;
		box-sizing: border-box;
		width: 80%;
	}

	.clocal text {
		display: flex;
		flex: 1;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: @text-color2;
		letter-spacing: 1;
	}

	.clocal button {
		height: 5vh;
		line-height: 5vh;
		padding: 0 40rpx;
		font-size: 0.85rem;
		color: #666;
		margin-top: 1.5vh;
		background: none;
	}

	.arealist {
		height: 70vh;
		width: 750rpx;
		background: #fefefe;
	}

	.hiscity {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: @text-color2;
		letter-spacing: 1px;
		text-align: left;
		padding: 40rpx;
	}

	.hislist1 {
		padding-left: 40rpx;
		height: 100rpx;
		padding-top: 10rpx;
	}

	.hislist {
		padding-left: 40rpx;
		height: 210rpx;
		padding-top: 10rpx;
	}

	.hislist button {
		float: left;
		width: 26vw;
		padding: 10rpx 0;
		font-size: 34rpx;
		color: #666;
		height: 70rpx;
		line-height: 50rpx;
		margin-right: 2vw;
		margin-top: 20rpx;
		overflow: visible;
		background-color: #F5F7FA;
	}

	.hislist button::after {
		border: none;
	}

	.hislist button.last {
		margin-right: 0;
	}

	.areall {
		width: 150rpx;
		font-size: 0.9rem;
	}

	.cityword {
		padding: 40rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: @text-color2;
	}

	.all {
		margin: 0 40rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.cityname {
		background: #F5F7FA;
		border-radius: 10rpx;
		padding: 16rpx 38rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #606266;
		margin: 12rpx 24rpx 12rpx 0;
	}

	.citypop {
		position: absolute;
		left: 0;
		top: 9vh;
		width: 100vw;
		height: 90.9vh;
		background: #fff;
		z-index: 4;
	}

	.wordlist {
		position: absolute;
		right: 0;
		width: 10vw;
		top: 18vh;
		height: 80.9vh;
		display: flex;
		flex-direction: column;
		z-index: 2;
	}

	.wordlist view {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #909399;
		text-align: center;
		flex: 1;
	}

	.tipword {
		position: fixed;
		top: 17vh;
		width: 100%;
		z-index: 1;
		display: none;
	}

	.btn {
		float: left;
		padding: 16rpx 38rpx;
		font-size: 34rpx;
		color: #666;
		line-height: 50rpx;
		margin-right: 2vw;
		margin-bottom: 20rpx;
		overflow: visible;
		background-color: #F5F7FA;
	}

	.popword {
		position: fixed;
		left: 50%;
		top: 50%;
		width: 160rpx;
		height: 160rpx;
		margin-left: -80rpx;
		margin-top: -80rpx;
		color: #fff;
		font-size: 2rem;
		text-align: center;
		line-height: 150rpx;
		border-radius: 10rpx;
		z-index: 3;
		background: url();
	}
</style>